<template>
  <div class="style">
    <el-container>
      <el-header>
        <div>
          <span class="demonstration">收款日期</span>
          <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" class="date2" value-format="yyyy-MM-dd">
          </el-date-picker>
          <el-button type="info" class="btn" @click="onResize">重置</el-button>
          <el-button type="primary" class="btn" @click="onSearch">查询</el-button>
        </div>
      </el-header>
      <el-main>
        <div class="tip">
          <p>
            <i class="el-icon-info"></i>
            <span class="text text_left">收款总计：</span>
            <span class="text text_bold">{{sx}}</span>
            <span class="text">万</span>
          </p>
        </div>
      </el-main>
      <div>
        <el-table :data="tableData" style="width: 100%" :header-cell-style='headerstyle' :row-style="{height:'66px'}">
          <el-table-column prop="shoukuan_dh" label="收款单号" width="230">
          </el-table-column>
          <el-table-column prop="shoukuan_skje" label="收款金额" width="230">
          </el-table-column>
          <el-table-column prop="shoukuan_dfzh" label="对方账号" width="240">
          </el-table-column>
          <el-table-column prop="shoukuan_skfs" label="收款方式" width="240">
          </el-table-column>
          <el-table-column prop="shoukuan_ms" label="描述" width="250">
          </el-table-column>
          <el-table-column prop="shoukuan_sksj" label="收款时间" width="240">
          </el-table-column>
        </el-table>
      </div>
      <el-footer>
        <div>
          <page class="page" />
        </div>
      </el-footer>
    </el-container>
  </div>

</template>

<script>
  import Event from "../../utils/Event.js";
  import page from '../../components/page.vue'

  export default {
    data() {
      return {
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        //总计
        tol: '',
        sx: '',

        page: 1,
        count: 5,
        //原有容器
        tableData: [],
        //查询容器
        tableData1: [],
        //第一次过滤
        inputarr: [],
        //第二次过滤
        inputarr1: [],

        //选择日期
        pickerOptions: {},
        value1: '',
        value2: ''
      };
    },

    methods: {
      //表头颜色
      headerstyle() {
        return 'background:#FAFAFA'
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      // 查询
      onSearch() {
        this.inputarr = [];
        this.inputarr1 = [];
        // console.log(typeof this.value1);
        this.arr1 = Object.values(this.value1);
        // console.log(this.arr1);
        // console.log(this.tableData);
        if (this.value1 != '') {
          for (let i = 0; i < this.tableData1.length; i++) {
            if (this.arr1[0] <= this.tableData1[i].shoukuan_sksj) {
              this.inputarr.push(this.tableData1[i])
              // console.log(this.inputarr);
            }
          }
          // Event.$emit('table', this.inputarr)
        }
        if (this.inputarr != '') {
          for (let i = 0; i < this.inputarr.length; i++) {
            if (this.arr1[1] >= this.inputarr[i].shoukuan_sksj) {
              this.inputarr1.push(this.inputarr[i])
              //  console.log(this.inputarr1);
            }
          }
          Event.$emit('table', this.inputarr1);
          this.zongshu();
        } else {
          for (let i = 0; i < this.tableData1.length; i++) {
            if (this.arr1[0] >= this.tableData1[i].shoukuan_sksj) {
              // console.log(this.inputarr);
            }
          }
          Event.$emit('table', this.inputarr1);
          this.zongshu();
        }
      },
      // 重置
      onResize() {
        this.value1 = ''
        // console.log(this.value1);
        this.getuser()
      },
      // 将调用的数据放进tableData数组中
      getuser: function () {
        this.$axios({
          url: '/money/shoukuanSel'
        }).then((res) => {
          Event.$emit('table', res.data.data)
          this.tableData = res.data.data;
          this.tableData1 = res.data.data;
          this.inputarr1 = res.data.data;
          this.zongshu();
        })
      },
      //查询
      zongshu() {
        let tol = 0;
        let tolmoney = 0;
        for (let i = 0; i < this.inputarr1.length; i++) {
          tol = parseInt(this.inputarr1[i].shoukuan_skje);
          tolmoney = tol + tolmoney;
          // console.log(tolmoney);
        }
        this.sx = tolmoney;
      },
      receive() {
        Event.$on('tableData', v => {
          this.tableData = v.tableData;
          // console.log(v);
        })
      }
    },
    created() {
      this.getuser();
    },
    mounted() {
      this.receive();
    },
    beforeUpdate() {
      this.receive();
    },




    components: {
      page
    },

  }
</script>
<style lang="less" scoped>
  .style {
    width: 100%;
    height: 100%;
    // background-color: white;
    padding: 0 50px;
    margin-top: 20px;
  }

  .el-main {
    padding: 0;
  }

  .page {
    text-align: center;
    margin-top: 30px;
  }

  .el-table {
    padding-left: 18px;
  }

  .input {
    width: 280px;
    margin: 0 5px;
  }

  .btn {
    float: right;
    margin: 0 22px;
  }

  .date2 {
    width: 400px;
    margin-left: 5px;
  }

  .tip {
    height: 41px;
    line-height: 41px;
    padding-left: 18px;
    background: #E6F7FF;
    border: 1px #BAE7FF solid;
    margin: 20px 0;
  }

  .el-icon-info {
    color: #078FEA;
  }

  .text {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.647058823529412);
  }

  .text_left {
    margin-left: 10px;
  }

  .text_bold {
    font-weight: 400;
  }
</style>